<%@ page import="eudjok.Musica" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'musica.label', default: 'Musica')}" />
        <title><g:message code="Veja o top das músicas mais avaliadas do dia" args="[entityName]" /></title>
	<script>
		function AbreAba(nome_div)
		{
			var total_divs = document.getElementsByTagName('div').length;
			var div = "";
			var td = "";

			for (var i=1; i < total_divs+1; i++)
			{
				div = "div"+i;
				td = "td"+i;
				document.getElementById(div).style.display = "none"; 
				document.getElementById(td).style.backgroundColor = "";
				document.getElementById(div).className="div"; 

				if (div == nome_div)
				{
					document.getElementById(nome_div).style.display = "block"; 
					document.getElementById(td).style.backgroundColor = "#CCCCCC";
				}
				
			}
        }
</script>	
    </head>
    <body>
        <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></span>
            <span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
			
        </div>
        <div class="body">
			<table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td1"><a href="#" onclick="AbreAba('div1')">Melhores do Dia</a></td>
					<td id="td2"><a href="#" onclick="AbreAba('div2')">Mais Avaliadas</a></td>
					<td id="td3"><a href="#" onclick="AbreAba('div3')">Mais Acessadas</a></td>
					<td id="td4"><a href="#" onclick="AbreAba('div4')">Mais Indicadas</a></td>
				
				</tr>
			</table>
			
			<div id="div1" style="display:block">
            <h1><g:message code="Melhores do Dia" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
			<br />
				<table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td5"><a href="#" onclick="AbreAba('div5')">Mensal</a></td>
					<td id="td6"><a href="#" onclick="AbreAba('div6')">Anual</a></td>
				
				</tr>
			</table>	
			
			  <br />
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="id" title="${message(code: 'musica.id.label', default: 'Id')}" />
                        
                            <g:sortableColumn property="descricao" title="${message(code: 'musica.descricao.label', default: 'Descricao')}" />
							
							<g:sortableColumn property="visitas" title="${message(code: 'musica.visitas.label', default: 'Visitas')}" />
							
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListDia}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>
                        
                            
                        
                            <td>${fieldValue(bean: musicaInstance, field: "descricao")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "visitas")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>	
            </div>

			<div id="div2" style="display:none">
			<h1><g:message code="Mais Avaliadas" args="[entityName]" /></h1>
			<table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="id" title="${message(code: 'musica.id.label', default: 'Id')}" />
                        
                            <g:sortableColumn property="descricao" title="${message(code: 'musica.descricao.label', default: 'Descricao')}" />
							
							<g:sortableColumn property="visitas" title="${message(code: 'musica.visitas.label', default: 'Visitas')}" />
							
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListAvaliadas}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>
                        
                            
                        
                            <td>${fieldValue(bean: musicaInstance, field: "descricao")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "visitas")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                 </table>
				</div>
				
			<div id="div3" style="display:none">
				<h1><g:message code="Mais acessadas" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="id" title="${message(code: 'musica.id.label', default: 'Id')}" />
                        
                            <g:sortableColumn property="descricao" title="${message(code: 'musica.descricao.label', default: 'Descricao')}" />
							
							<g:sortableColumn property="acessadas" title="${message(code: 'musica.visitas.label', default: 'Acessadas')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListAcessadas}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>
                        
                            
                        
                            <td>${fieldValue(bean: musicaInstance, field: "descricao")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "visitas")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
				</div>
				
			</div>
			
			<div id="div4"	 style="display:none">
			<h1><g:message code="Mais Indicadas" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="id" title="${message(code: 'musica.id.label', default: 'Id')}" />
                        
                            <g:sortableColumn property="descricao" title="${message(code: 'musica.descricao.label', default: 'Descricao')}" />
							
							<g:sortableColumn property="indicacoes" title="${message(code: 'musica.indicacoes.label', default: 'Indicadas')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListIndicadas}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>
                        
                            
                        
                            <td>${fieldValue(bean: musicaInstance, field: "descricao")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "indicacoes")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>
			</div>
			<br /><br />
			 <div id="div5" style="display:none">
			 <br /><br />
			 <table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td5"><a href="#" onclick="AbreAba('div5')">Mensal</a></td>
					<td id="td6"><a href="#" onclick="AbreAba('div6')">Anual</a></td>
				
				</tr>
			</table>	
			<br /><br />
			<g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="id" title="${message(code: 'musica.id.label', default: 'Id')}" />
                        
                            <g:sortableColumn property="descricao" title="${message(code: 'musica.descricao.label', default: 'Descricao')}" />
							
							<g:sortableColumn property="mes" title="${message(code: 'musica.mes.label', default: 'Melhores do Mês')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListMensal}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>
                        
                            
                        
                            <td>${fieldValue(bean: musicaInstance, field: "descricao")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "mes")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>				
			</div>
			 <br /><br /> 
			<div id="div6" style="display:none">
			 <table width="400" cellspacing="0">
			<tr>
				<br>
					<td id="td5"><a href="#" onclick="AbreAba('div5')">Mensal</a></td>
					<td id="td6"><a href="#" onclick="AbreAba('div6')">Anual</a></td>
				
				</tr>
			</table>
			<br /><br /> 			
			<g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="top">
                <table>
                    <thead>
                        <tr>
                        
                            <g:sortableColumn property="id" title="${message(code: 'musica.id.label', default: 'Id')}" />
                        
                            <g:sortableColumn property="descricao" title="${message(code: 'musica.descricao.label', default: 'Descricao')}" />
							
							<g:sortableColumn property="ano" title="${message(code: 'musica.ano.label', default: 'Melhores Anual')}" />
                        
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${musicaInstanceListAnual}" status="i" var="musicaInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                        
                          <td><g:link action="show" id="${musicaInstance.id}">${fieldValue(bean: musicaInstance, field: "id")}</g:link></td>
                        
                            
                        
                            <td>${fieldValue(bean: musicaInstance, field: "descricao")}</td>
							
							<td>${fieldValue(bean: musicaInstance, field: "ano")}</td>
                        
                        </tr>
                    </g:each>
                    </tbody>
                </table>
			 </div>
				
			  </div>
            <div class="paginateButtons">
            </div>
        </div>
    </body>
</html>